<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="StyleSheet" type="text/css" href="/tpa/admin.css" />
      <link rel="StyleSheet" type="text/css" href="/tpa/jquery-ui.css" />
      <style type="text/css">
         form {margin:20px 0;}
         form div.odd {background-color:#F7F7F7;}
         form div span.td {display:inline-block;width:180px;border-right:1px dotted #AAA; margin-right:15px; padding:8px; background-color:#FAFFEB;}
         form div.odd span.td {background-color:#F4FFD1;}
         form th {font-size:12px;}
         hr {width:100%;color:#CCC;border-top:1px solid #CCC;margin:0;}
      </style>
      <script type="text/javascript" src="/lib/js/jquery.js"></script>
      <script type="text/javascript" src="/lib/js/jquery.ui.js"></script>
      <script type="text/javascript" src="/lib/js/jquery.validate.js"></script>
      <script type="text/javascript" src="/lib/js/meccano.js"></script>
   </head>
   <body>
      <div class="lt" style="padding:30px;">
         {%$categories[11].title%}: <h3 class="inline">{%if $c%}{%$c.title%}{%else%}{%$TR->meccano->rootsection%}{%/if%}</h3>
         <form action="/admin/addfield{%if $c%}/{%$c.id%}{%/if%}.html" method="post" id="addfield">
            <hr />
            <div id="belong">
               <span class="td">{%$TR->fieldmaster->belong%}:</span>
               <input type="radio" name="f[belong]" value="a" id="belong_a" checked="checked" />
               <label for="belong_a"> - {%$TR->fieldmaster->article%}</label>
               <input type="radio" name="f[belong]" value="c" id="belong_c" />
               <label for="belong_c"> - {%$TR->fieldmaster->section%}</label>
            </div>
            <div id="fieldset" class="odd">
               <span class="td">{%$TR->fieldmaster->fieldset%}:</span>
               <input type="radio" name="f[fset]" value="0" id="fset_off" checked="checked" onchange="if(this.checked) $('#fset_name, #fset_title').hide();classIfy();" />
               <label for="fset_on"> - {%$TR->meccano->no%}</label>
               <input type="radio" name="f[fset]" value="1" id="fset_on" onchange="if(this.checked) $('#fset_name').show();classIfy();" />
               <label for="fset_off"> - {%$TR->meccano->yes%}</label>
            </div>
            <div id="fset_name" style="display:none;">
               <span class="td">{%$TR->fieldmaster->setalias%}:</span>
               <input type="text" name="f[fset_name]" />
            </div>
            <div id="fset_title" style="display:none;">
               <span class="td">{%$TR->fieldmaster->settitle%}</span>
               <input type="text" name="f[fset_title]" />
            </div>
            <div id="field_name">
               <span class="td">{%$TR->fieldmaster->alias%}:</span>
               <input type="text" name="f[name]" id="f[name]" />
            </div>
            <div id="field_title" class="odd">
               <span class="td">{%$TR->meccano->fieldname%}:</span>
               <input type="text" name="f[title]" />
            </div>
            <div id="field_type">
               <span class="td">{%$TR->fieldmaster->fieldtype%}:</span>
               <select name="f[field_type]" onchange="FieldType(this.value);">
                  <option value=""> --- </option>
                  {%foreach from=$TR->datatypes item='v' key='k'%}
                  <option value="{%$k%}">{%$v%}</option>
                  {%/foreach%}
               </select>
            </div>
            <div id="field_text_value" class="odd">
               <span class="td">{%$TR->meccano->defaultvalue%}:</span>
               <input type="text" name="f[text_default]" />
            </div>
            <div id="field_logic_value" style="display:none;">
               <span class="td">{%$TR->meccano->defaultvalue%}:</span>
               <input type="radio" value="1" name="f[logic_default]" id="logic_def_value_yes" checked />
               <label for="logic_def_value_yes"> - {%$TR->meccano->yes%}</label>
               <input type="radio" value="0" name="f[logic_defalut]" id="logic_def_value_no" />
               <label for="logic_def_value_no"> - {%$TR->meccano->no%}</label>
            </div>
            <div id="field_multiline">
               <span class="td">{%$TR->meccano->multilinefield%}</span>
               <input type="checkbox" name="f[multiline]" value="1" onchange="MultilineField(this.checked);" />
            </div>
            <div id="field_height" style="display:none;">
               <span class="td">{%$TR->fieldmaster->field_height%}:</span>
               <input type="text" name="f[height]" value="200" />
            </div>
            <div id="field_emode" style="display:none;">
               <span class="td">{%$TR->fieldmaster->field_type%}:</span>
               <select name="f[emode]">
                  <option value="Textarea">Textarea</option>
                  <option value="Plane">Plane</option>
                  <option value="Basic">Basic</option>
                  <option value="Simple">Simple</option>
                  <option value="Advanced">Advanced</option>
               </select>
            </div>
            <div id="field_select" style="display:none;">
               <div id="tabedContent" style="margin-top:10px;">
                  {%if count($langs) > 1%}
                  {%foreach from=$langs item='l' name='i'%}
                  {%if $smarty.foreach.i.first%}<ul class="fields_tabs">{%/if%}
                     <li><a href="#vars" onclick="SwitchLang({%$l.id%});"><span style="text-transform:uppercase;">{%$l.title%}</span></a></li>
                     {%if $smarty.foreach.i.last%}</ul>{%/if%}
                  {%/foreach%}
                  {%/if%}

                  <div style="float:right;margin: 5px; top:-40px;position:relative;" align="right">
                     <input type="button" onclick="AddSelectValue();" value=" {%$TR->meccano->add%} " />
                  </div>

                  <div id="vars">
                     <table>
                        <tr>
                           <th>ID:</th>
                           <th>{%$TR->meccano->value%}:</th>
                           <th>{%$TR->meccano->default%}:</th>
                        </tr>
                        <tr>
                           <td>1</td>
                           <td>
                              {%foreach from=$langs item='l'%}
                              <span class="multilang" rel="{%$l.id%}"{%if $l.id neq $default_lang%} style="display:none;"{%/if%}>
                                 <input type="text" name="f[values][1][{%$l.id%}]" />
                              </span>
                              {%/foreach%}
                           </td>
                           <td><input type="radio" name="f[select_default]" value="1" /></td>
                        </tr>
                     </table>
                  </div>
               </div>
            </div>
            <div id="field_image" style="display:none;">
               <span class="td">{%$TR->meccano->minWidth%}:</span>
               <input type="text" name="f[min_width]" /><br />
               <span class="td">{%$TR->meccano->minHeight%}:</span>
               <input type="text" name="f[min_height]" /><br />
               <span class="td">{%$TR->meccano->maxWidth%}:</span>
               <input type="text" name="f[max_width]" /><br />
               <span class="td">{%$TR->meccano->maxHeight%}:</span>
               <input type="text" name="f[max_height]" /><br />
               <span class="td">{%$TR->meccano->imgRatio%}:</span>
               <input type="checkbox" name="f[fix]" />
            </div>
            <hr />

            <input type="submit" name="commit" value="{%$TR->meccano->save%}" style="margin-top:20px;" />
         </form>
      </div>
      <script type="text/javascript">
         var select_index = 1;
         var editors = [];

         function FieldType(type)
         {
            if(type == 'string' || type == 'float' || type == 'integer')
            {
               hideAll();
               if(type == 'string') $('#field_multiline').show();
               $('#field_text_value').show();
            } else if(type == 'logic')
            {
               hideAll();
               $('#field_logic_value').show();
            } else if(type == 'select' || type == 'multiselect')
            {
               hideAll();
               $('#field_select').show();
            } else if(type == 'image')
            {
               hideAll();
               $('#field_image').show();
            } else if(type == 'date')
            {
               hideAll();
               $('#field_text_value').show();
               $('#field_text_value input').val('now');
            } else
            {
               hideAll();
            }
            classIfy();
         }
         function hideAll()
         {
            $('#field_logic_value').hide();
            $('#field_select').hide();
            $('#field_image').hide();
            $('#field_multiline').hide();
            $('#field_multiline input').attr('checked','');
            $('#field_text_value').hide();
            $('#field_text_value input').val('');

            MultilineField(false);
         }
         function MultilineField(sw)
         {
            if(sw)
            {
               $('#field_height').show();
               $('#field_emode').show();
            } else
            {
               $('#field_height').hide();
               $('#field_emode').hide();
            }
            classIfy();
         }
         function AddSelectValue()
         {
            var html = '';
            select_index++;
            html += '<tr><td>'+ select_index +'</td><td>';
            {%foreach from=$langs item='l'%}
            html += '<span class="multilang" rel="{%$l.id%}"{%if $l.id neq $default_lang%} style="display:none;"{%/if%}>';
            html += '<input type="text" name="f[values]['+select_index+'][{%$l.id%}]" /></span>';
            {%/foreach%}
            html += '</td><td><input type="radio" name="f[select_default]" value="'+ select_index +'"></td></tr>';

            var rows = $("#vars tr");
            $(html).insertAfter(rows[0]);
         }
         function AddTypes(v)
         {
            if(v == 'new')
            {
               $('#field_type_name').show();
            } else
            {
               $('#field_type_name').hide();
            }
         }
         function classIfy()
         {
            $('#addfield div:visible:even').removeClass('odd');
            $('#addfield div:visible:odd').addClass('odd');
         }
         $(window).ready(
            function(){
                $('#tabedContent').tabs();
                jQuery.validator.addMethod("fieldset", function(value, element)
                {
                   var fname = element.name;
                   $.getJSON("/admin/validator.php", {fname:value}, function(r){
                      if(r == true)
                      {
                          $('#fset_title').show();
                          $('label[for="'+ fname +'"]').remove();
                          classIfy();
                          // hide warning if displayd
                      } else if($('label[for="'+ fname +'"]').size() == 0)
                      {
                    	    $('#fset_title').hide();
                    	    classIfy();
                         $(element).after('<label class="error" generated="true" for="'+ fname + '">{%$TR->warn->addfield_fset_exist|escape:"javascript"%}</label>');
                      }
                   });
                   return true;
                }, "{%$TR->warn->addfield_fset_exist|escape:'javascript'%}");
                $('#addfield').validate({
                    rules: {
                       'f[name]': {required: true, remote:'/admin/validator.php'},
                       'f[fset_name]':{fieldset:true},
                       'f[title]':'required',
                       'f[field_type]':'required'
                    },
                    messages: {
                       'f[name]': {required: "{%$TR->error->addfield_name|escape:'javascript'%}",remote: "{%$TR->error->addfield_name_exist|escape:'javascript'%}"},
                       'f[title]':'{%$TR->error->addfield_title|escape:"javascript"%}',
                       'f[field_type]':'{%$TR->error->addfield_type|escape:"javascript"%}'
                    }
                 });
            }
         );
      </script>
   </body>
</html>